<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            li {
                float: left;
                margin: 0 1px;
                list-style: none;
                cursor: pointer;
            }

            img {
                width: 100px;
                height: 80px;
            }

            body {
                background: url(pic/1.jpg) no-repeat center;
            }

            .bd {
                /* overflow: hidden; */
                margin: 100px auto;
                width: 410px;
                background-color: white;
                height: 86px;
                padding-top: 3px;
            }
        </style>
    </head>
    <body>
        <ul class="bd">
            <li><img src="pic/1.jpg"></li>
            <li><img src="pic/2.jpg"></li>
            <li><img src="pic/3.jpg"></li>
            <li><img src="pic/4.jpg"></li>
        </ul>
        <script type="text/javascript">
            var imgs = document.querySelector('.bd').querySelectorAll('img');
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].onclick = function() {
                    document.body.style.backgroundImage = 'url(' + this.src + ')';
                }
            }
        </script>
    </body>
</html>
